<script setup>
import { ref, reactive } from "vue";
import { Lock, User } from "@element-plus/icons-vue";

import useUserInfoStore from '@/store/user.js'
import { useRouter } from "vue-router";
import {GetRegisterAccount} from "@/api/index.js";
import {ElMessage} from "element-plus";
const router = useRouter();
const store = useUserInfoStore();
const registerForm = reactive({
  username: "",
  password: "",
})
const registerFormRef = ref();
// 对数据进行校验
const registerFormRules = reactive({
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    {
      min: 6,
      message: "密码长度不能少于6位",
      trigger: "blur",
    },
  ],

});
const submitForm = async (registerFormRef) => {
  if (!registerFormRef) return ;
  await registerFormRef.validate(async (valid) => {
    if (valid) {
      await handleGetRegisterAccount()
    }
  })
}
const handleGetRegisterAccount = async () =>{
  try {
    const res = await GetRegisterAccount(registerForm)
    if( res.status===201){
      await router.push('/login')
      ElMessage.success(res.msg)
    }
    else{
      ElMessage.error(res.msg)
    }
  } catch (error) {
    console.log(error);
    ElMessage.error('网络出错，请稍后注册！')
  }
}

</script>

<template>
  <div class="register-container">
    <div class="title">AdPulse</div>
    <div class="form-container">
      <h2 class="welcome-text">注册页</h2>
      <el-form ref="registerFormRef" :model="registerForm" status-icon :rules="registerFormRules" label-width="auto"
               class="demo-registerForm">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-icon color="#409efc" :size="30">
            <User />
          </el-icon>
          <el-input type="text" v-model="registerForm.username" placeholder="请输入用户名" />
        </el-form-item>

        <!-- 密码 -->
        <el-form-item prop="password">
          <el-icon color="#409efc" :size="30">
            <Lock />
          </el-icon>
          <el-input type="password" v-model="registerForm.password" placeholder="请输入密码" />
        </el-form-item>

        <!-- 登录链接 -->
        <p class="login-link-box">
          <router-link to="/login" class="login-link">已有账号？点击登录</router-link>
        </p>

        <!-- 注册按钮 -->
        <el-form-item id="button">
          <el-button type="primary" @click="submitForm(registerFormRef)">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<style lang="less" scoped>
.register-container{
  background-image: url("@/assets/img/background.png");
  background-size: cover;
  background-attachment: fixed; /* 背景图固定，不随页面滚动 */
  height: 100%;
}

.title {
  font-size: 35px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}

.form-container {
  margin: auto;
  background: linear-gradient(135deg, #fff3e6, #f5f8fa);
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* 更柔和的阴影 */
  width: 100%;
  max-width: 400px; /* 最大宽度 */
  transition: box-shadow 0.3s ease-in-out; /* 添加动态阴影效果 */
}

.form-container:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); /* 鼠标悬停时阴影效果增强 */
}

.welcome-text {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 30px;
  color: #333333;
}

.demo-registerForm {
  .el-form-item {
    margin-bottom: 20px;
  }

  .el-input__inner {
    padding: 12px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease-in-out; /* 输入框过渡效果 */
  }

  .el-input__inner:focus {
    border-color: #409efc;
    box-shadow: 0 0 8px rgba(64, 158, 252, 0.3); /* 输入框聚焦时的光辉效果 */
    transform: scale(1.02); /* 聚焦时轻微放大 */
  }

  .el-icon {
    margin-right: 10px;
  }

  .login-link-box {
    text-align: center;
    margin-top: 10px;

    .login-link {
      color: #409efc;
      font-size: 14px;
      text-decoration: none;
      transition: color 0.3s ease; /* 过渡效果 */
    }

    .login-link:hover {
      text-decoration: underline;
      color: #2980b9; /* 鼠标悬停时颜色变更 */
    }
  }

  #button {
    text-align: center;
    .el-button {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      border-radius: 4px;
      background: linear-gradient(45deg, #409efc, #1e74d8); /* 渐变背景 */
      border: none;
      transition: all 0.3s ease; /* 按钮过渡效果 */
    }

    .el-button:hover {
      background: linear-gradient(45deg, #1e74d8, #409efc);
      transform: scale(1.05); /* 鼠标悬停时按钮放大 */
      box-shadow: 0 4px 12px rgba(64, 158, 252, 0.3); /* 按钮悬停时阴影效果 */
    }
  }
}
</style>